import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import * as defaultStyles from '../constants/DefaultStyles';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class NavigatorBar extends Component {
  _leftBtn() {
    if (this.props.leftImage) {
      return (<Icon name={this.props.leftImage} color="white"
                    size={this.props.leftImageSize ? this.props.leftImageSize : 25} />);
    }
  }
  _right() {
    if (this.props.rightImage) {
      return (<Icon name={this.props.rightImage} color="white" size={25} />);
    }
    if (this.props.rightText) {
      return (<Text style={styles.navBarRightBtnTitle}>{this.props.rightText}</Text>)
    }
  }
  render() {
    return(
      <View style={[styles.navBar, {backgroundColor: this.props.navBarColor}]}>
        <View style={{height: defaultStyles.isIOS ? 20 : 0}}/>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <TouchableOpacity style={styles.navBarLeftBtn}
                            onPress={() => {
                            if (this.props.leftClick)
                              this.props.leftClick();
                          }
          }>
            {this._leftBtn()}
          </TouchableOpacity>
          <View style={styles.navBarTitle}>
            <Text style={{color: 'white', fontSize: 18, marginRight: 10}}>{this.props.title}</Text>
          </View>
          <TouchableOpacity style={styles.navBarRightBtn}
                            onPress={() => {
                            if (this.props.rightClick)
                              this.props.rightClick();
                          }
          }>
            {this._right()}
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  navBar: {
    height: defaultStyles.OS === 'ios' ? 64 : 44,
  },
  navBarLeftBtn: {
    flex: 1,
    justifyContent: 'center',
    marginLeft: 10,
  },
  navBarTitle: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  navBarRightBtn: {
    flex: 1,
    marginRight: 10,
    alignItems: 'flex-end',
    justifyContent: 'center'
  },
  navBarRightBtnTitle: {
    color: 'white',
    fontSize: 16,
  }
})